<template>
  <div class="p-6 space-y-6">
    <h2 class="text-2xl font-bold">LoginModal 组件演示</h2>

    <div class="space-y-4">
      <h3 class="text-lg font-semibold">基础用法</h3>
      <button
        @click="showModal = true"
        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        打开登录弹窗
      </button>

      <LoginModal v-model:visible="showModal" @login="handleLogin" @register="handleRegister" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LoginModal from '../index.vue'

const showModal = ref(false)

const handleLogin = (data: any) => {
  console.log('登录数据:', data)
  showModal.value = false
}

const handleRegister = (data: any) => {
  console.log('注册数据:', data)
  showModal.value = false
}
</script>
